<template>
	<PageCard title="MyBatis 日志提取工具">
		<n-spin :show="loading">
			<n-grid :x-gap="12" :y-gap="8" :cols="21">
				<n-gi :span="10">
					<n-h3>MyBatis 日志</n-h3>
					<n-input
						v-model:value="logInput"
						type="textarea"
						placeholder="在此粘贴包含 'Preparing: ' 和 'Parameters: ' 的 MyBatis 日志"
						:rows="20"
					/>
				</n-gi>
				<n-gi :span="1" style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;">
					<n-space vertical>
						<n-tooltip trigger="hover">
							<template #trigger>
								<n-button circle strong secondary type="primary" @click="handleConvert" :disabled="!logInput">
									<template #icon>
										<n-icon :component="ArrowForward"/>
									</template>
								</n-button>
							</template>
							转换
						</n-tooltip>
						<n-tooltip trigger="hover">
							<template #trigger>
								<n-button circle strong secondary type="default" @click="handleCopy" :disabled="!sqlOutput">
									<template #icon>
										<n-icon :component="CopyIcon"/>
									</template>
								</n-button>
							</template>
							复制代码
						</n-tooltip>
					</n-space>
				</n-gi>
				<n-gi :span="10">
					<n-h3>可执行 SQL</n-h3>
					<n-input
						v-model:value="sqlOutput"
						type="textarea"
						placeholder="转换后的 SQL 将显示在此处"
						:rows="20"
						readonly
					/>
				</n-gi>
			</n-grid>
		</n-spin>
		<n-divider />
		<UsageGuide
			:title="usageGuideConfig.title"
			:steps="usageGuideConfig.steps"
			:tips="usageGuideConfig.tips"
			:example="usageGuideConfig.example"
		/>
	</PageCard>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {useMessage, NIcon} from 'naive-ui';
import {ArrowForward} from '@vicons/ionicons5';
import {CopyAllOutlined as CopyIcon} from '@vicons/material';
import {extractSqlFromLog} from "@/api/mybatis/index.ts";
import PageCard from "@/components/PageCard.vue";
import UsageGuide from "@/components/UsageGuide.vue";

const logInput = ref('');
const sqlOutput = ref('');
const loading = ref(false);
const message = useMessage();

// UsageGuide configuration
const usageGuideConfig = {
  title: '使用说明',
  steps: [
    '从应用控制台复制包含 MyBatis SQL 日志的内容',
    '日志中需要包含 Preparing: 和 Parameters: 两部分',
    '粘贴到左侧的 MyBatis 日志输入框',
    '点击中间的转换按钮，右侧将显示可执行的 SQL'
  ],
  tips: [
    '支持批量转换多条 SQL 日志',
    '自动处理参数替换，包括字符串、数字、日期等类型',
    '生成的 SQL 可以直接在数据库中执行'
  ],
  example: `输入示例：Preparing: SELECT * FROM user WHERE id = ? AND name = ?
Parameters: 1(Long), 张三(String)`
};

const handleConvert = () => {
	if (!logInput.value) return;
	loading.value = true;
	extractSqlFromLog(logInput.value)
		.then(res => {
			sqlOutput.value = res.data;
		})
		.catch(err => {
			message.error("转换失败，请检查日志格式或联系管理员。");
			console.error("转换失败:", err);
		})
		.finally(() => {
			loading.value = false;
		});
};

const handleCopy = async () => {
	if (!sqlOutput.value) return;
	try {
		await navigator.clipboard.writeText(sqlOutput.value);
		message.success('SQL 已成功复制到剪贴板！');
	} catch (err) {
		message.error('复制失败，您的浏览器可能不支持或未授予剪贴板权限。');
		console.error('Copy failed:', err);
	}
};
</script>

<style scoped lang="less">
.n-h3 {
	margin-top: 0;
	margin-bottom: 12px;
	text-align: center;
}
</style>
